<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>个人信息</title>
<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css">
<style>
p{
	color:#c2c2c2;
	font-family: sans-serif;
	font-size:18px;
}
td{
	padding-bottom:20px;
	text-align:center;
}
.hidden_info{
	display:none;
}

.se{
	color: #1E9FFF!important;
}

#mod  {
margin-left:10px;
}

</style>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	  <legend>${userInfo.id}的 基本信息</legend>
	</fieldset>
	<div id="show">
		<table width="600px">
			<tr>
				<td rowspan="3" colspan="1" ><img src="${userInfo.avatar}" id="avatar" class="layui-circle" width="100px" height="100px" /></td>
				<td></td>
				<td><p>账号</p></td>
				<td>${userInfo.id}</td>
			</tr>
			<tr>
				<td></td>
				<td><p>昵称</p></td>
				<td>${userInfo.username}</td>
			</tr>
			<tr>
				<td ><p style="font-size:12px">
				<%
					var myid =session.USERINFO.id;
					var	id = userInfo.id; 
					if(myid==id){
				%>
					<i class="layui-icon" id='mod_userinfo'>&#xe642;</i>   				
				<%
					}
				%>	
				</p></td>
				<td><p>性别</p></td>
				<td>
				<%if(userInfo.sex==0){%>
					女
				<% }else{ %>
					男
				<% }%>
				</td>
			</tr>
			<tr>
				<td><p>年龄</p></td>
				<td>${userInfo.age}</td>
				<td><p>联系方式</p></td>
				<td>${userInfo.tel}</td>
			</tr>
			<tr>
				<td><p>所属地</p></td>
				<td>${userInfo.place}</td>
				<td><p>邮箱</p></td>
				<td>${userInfo.email}</td>
			</tr>
		</table>
	</div>
	<div class="hidden_info" id="mod">
		<form class="layui-form" id="mod_form">
			<table width="600px">
			<tr>
				<td rowspan="3" colspan="2" ><img src="../img/user.png" id="avatar" class="layui-circle" width="100px" height="100px" /></td>
				<td><p>账号</p></td>
				<td style="text-align:left">${userInfo.id}</td>
				<input type="hidden" name="no" value="${userInfo.no}"  />		
			</tr>
			<tr>
				<td><p>昵称</p></td>
				<td ><input type="text" name="username" value="${userInfo.username}" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
				</td>
			</tr>
			<tr>
				<td><p>性别</p></td>
				<td style="text-align:left">
				    	<%if(userInfo.sex==0){%>
				   	 	 	<input type="radio" name="sex" value="1"  title="男">
						 	<input type="radio" name="sex" value="0"   title="女" checked>
						<% }else{ %>
							<input type="radio" name="sex" value="1"  title="男" checked>
							 <input type="radio" name="sex" value="0" title="女" >
						<% }%>
				</td>
			</tr>
			<tr>
				<td><p>年龄</p></td>
				<td>
					<input type="text" name="age" value="${userInfo.age}" required  lay-verify="required|number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
				</td>
				<td><p>联系方式</p></td>
				<td>		      
					<input type="text" name="tel" required  value="${userInfo.tel}"  lay-verify="required|phone" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
				</td>
			</tr>
			<tr>
				<td><p>所属地</p></td>
				<td>
					<input type="text" name="place" required value="${userInfo.place}"   lay-verify="required" placeholder="请输入所属地" autocomplete="off" class="layui-input">
				</td>
				<td><p>邮箱</p></td>
				<td>
					<input type="text" name="email" required value="${userInfo.email}"   lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</td>
			</tr>	
		</table>
	</form>
			<div style="width:200px;float:right; margin-right:10px">
			<button class="layui-btn layui-btn-radius layui-btn-normal"   id="submit_btn">确认修改</button>		
			<button class="layui-btn layui-btn-radius layui-btn-primary"  id="return_btn">取消</button>
	</div>
</div>
<div class="hidden_info" id="mod_avatar" style="margin-left:10px;padding-left:10px">
		<img   id="show_avatar" class="layui-circle"  height="280px" width="280px"/>
		<input type="file" style="float:right" id="uploadAvatar" name="file"  class="layui-upload-file" />
		<br>
		<div style="width:200px;float:right; margin-right:10px">
		<button class="layui-btn layui-btn-radius layui-btn-normal"   id="mod_avatar_btn">修改头像</button>		
		<button class="layui-btn layui-btn-radius layui-btn-primary"  id="return_btn2">取消</button>
		</div>
</div>
<script src="${ctxPath}/resources/js/jquery-2.2.4.min.js"></script>
<script src="${ctxPath}/layui/layui.js"></script>

<script>
layui.use(['layim','form'], function(){
	  var form = layui.form(),upload = layui.upload;
	  //各种基于事件的操作，下面会有进一步介绍
	  $('#mod_userinfo').mouseover(function(){
		  $(this).addClass("se");
	  });
	  $('#mod_userinfo').mouseout(function(){
		  $(this).removeClass("se");
	  });
		 
	  $('#mod_userinfo').click(function(){
		  $('#show').addClass('hidden_info');
		  $('#mod').removeClass('hidden_info');
	  });
	  $('#return_btn').click(function(){
		  $('#mod').addClass('hidden_info');
		  $('#show').removeClass('hidden_info');
	  });
	  
	  $('#return_btn2').click(function(){
		  $('#mod_avatar').addClass('hidden_info');
		  $('#show').removeClass('hidden_info');
	  });
	  
	  
	  
	  //监听提交
	  $('#submit_btn').click(function(){
		  $.ajax({
			    type: "POST",
			    url: "${ctxPath}/user/modtify",
			    data: $("#mod_form").serialize(),
			    success: function(data){
			    	layer.confirm('成功', {
			    		  btn: ['确定'] //可以无限个按钮
			    		  ,yes: function(index, layero){
					    	location.reload() 	
			    		  }
			    		});
			   }
			   });
	  });
	  
	  $('#avatar').click(function(){
		if('${userInfo.id}'!='${session.USERINFO.id}'){
			return;
		}
		  $('#show').addClass('hidden_info');
		  $('#mod_avatar').removeClass('hidden_info');
		  $('#show_avatar').attr('src','${userInfo.avatar}');
		 layui.upload({
			  url: '${uploadAddr}/upload/uploadImg'
			  ,ext: 'jpg|png|gif' //那么，就只会支持这三种格式的上传。注意是用|分割。
			  ,method: 'POST' //上传接口的http类型
			  ,success: function(res){
				  $('#show_avatar').attr('src',res.data.src);
			  }
			});      
	  });
	  
	  $('#mod_avatar_btn').click(function(){
		var a = $('#show_avatar').attr('src');
		$.ajax({
			  url: '${ctxPath}/user/modtify'
			  ,data: {no:${userInfo.no},avatar:a} //那么，就只会支持这三种格式的上传。注意是用|分割。
			  ,async : false
		      ,type : "POST"
			  ,success: function(res){
				  layer.confirm('成功', {
		    		  btn: ['确定'] //可以无限个按钮
		    		  ,yes: function(index, layero){
				    	location.reload() 	
		    		  }
		    		});
			  }
			});      
	  });  
	});

</script>
</body>
</html>
